import { component$, useSignal } from '@builder.io/qwik';
import Tabs from '~/components/ui/Tabs';
import DemoButton from './DemoButton';
import DemoInput from './DemoInput';
import DemoMarkdown from './DemoMarkdown';
import DemoTagSelect from './DemoTagSelect';
import DemoTooltip from './DemoTooltip';
import DemoReact from './DemoReact';

export default component$(() => {
  const activeTabKey = useSignal('react');
  return (
    <div class="container mx-auto">
      <Tabs
        tabs={[
          { key: 'react', title: 'React' },
          { key: 'button', title: 'Button' },
          { key: 'input', title: 'Input' },
          { key: 'markdown', title: 'Markdown' },
          { key: 'tag-select', title: 'Tag Select' },
          { key: 'tooltip', title: 'Tooltip' },
        ]}
        activeTabKey={activeTabKey.value}
        onChange$={(newKey) => (activeTabKey.value = newKey)}
      />
      <div class={[activeTabKey.value == 'react' ? '' : 'hidden']}>
        <DemoReact />
      </div>
      <div class={[activeTabKey.value == 'button' ? '' : 'hidden']}>
        <DemoButton />
      </div>
      <div class={[activeTabKey.value == 'input' ? '' : 'hidden']}>
        <DemoInput />
      </div>
      <div class={[activeTabKey.value == 'markdown' ? '' : 'hidden']}>
        <DemoMarkdown />
      </div>
      <div class={[activeTabKey.value == 'tag-select' ? '' : 'hidden']}>
        <DemoTagSelect />
      </div>
      <div class={[activeTabKey.value == 'tooltip' ? '' : 'hidden']}>
        <DemoTooltip />
      </div>
    </div>
  );
});
